<template>
    <el-dialog :title="isEdit?'编辑特殊理箱':'新增特殊理箱'" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" :model="form" ref="form" class="search-form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：">
                        <select-port v-model="form.portCode" :name="form.portCode"></select-port>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业类型：" prop="planType">
                        <el-select v-model="form.planType" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTsJobStatus" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        <auto-search-custom @selectName="handleSelectName" @select="handleSelectId"
                                            :name="form.shipAgentName"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        <auto-history-container @matchRecord="selectContainer" @selectName="v=>form.containerId=v"
                                                :name="form.containerId"></auto-history-container>
                        <!--<auto-search-container v-model="form.containerId"></auto-search-container>-->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        <auto-search-entrust v-model="form.containerType"
                                             :name="form.containerType"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        <auto-search-size v-model="form.containerSize" :name="form.containerSize"></auto-search-size>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="结算单位：" prop="accountUnit">
                        <auto-search-custom @selectName="v=>form.accountUnit=v"
                                            @select="v=>form.accountUnit=v"
                                            :name="form.accountUnit"
                                            :isShipAgent="true" :isSpecialForm="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：" prop="sealNo">
                        <el-input v-model="form.sealNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        <el-select v-model="form.tradeType" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="施封日期：" prop="finishTime">
                        <el-date-picker v-model="form.finishTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理箱人：" prop="tallyClerkId">
                        <auto-search-resource searchType="JOB_ZYRY" searchName="resourceName" :name="form.tallyClerk"
                                              :tall="true" v-model="form.tallyClerkId"
                                              @selectId="v=>form.tallyClerkId=v"
                                              @selectName="v=>form.tallyClerk=v"></auto-search-resource>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理箱时间：" prop="tallyTime">
                        <el-date-picker v-model="form.tallyTime"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        type="datetime" placeholder="选择时间">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="进出口：" prop="imOrEx">
                        <el-select v-model="form.imOrEx" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictImportExport" :key="key" :label="val"
                                       :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" :rows="3" placeholder="请输入内容" :maxLength="120"
                                  v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="理箱照片：">
                        <attachments v-model="form.attachments" listType="picture-card"></attachments>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchContainer from '@/components/autocomplete/autoSearchContainerId'
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    import { getLocalTime } from "@/utils/dateFormat";
    import attachments from '@/components/file-upload'
    import { addPlanList, editPlanList, VerificationHistory } from '@/api/planList/planList'
    import { REG_ALL_NUMBER, REG_NUMBER, PUBLIC_NUM_CODE } from "@/utils/Reg";
    import selectPort from '@/components/select/selectPort'
    import autoHistoryContainer from '@/components/autocomplete/autoHistoryContainer'
    import { getWorkUserId } from "@/api/shipPlan/shipPlan";
    import { telLength } from "../../../utils/rules";

    export default {
        name: "planListForm",
        components: {
            autoSearchEntrust,
            autoSearchSize,
            autoSearchCustom,
            attachments,
            autoSearchContainer,
            autoSearchPortStation,
            selectPort,
            autoSearchResource,
            autoHistoryContainer
        },
        data() {
            return {
                isEdit: false,
                dialogForm: false,
                form: this.clearForm(),
                rules: {
                    containerId: [{ required: true, message: '请选择箱号', trigger: 'change,blur' },
                        { validator: PUBLIC_NUM_CODE, trigger: 'change' }, telLength],
                    containerSize: [{ required: true, message: '请选择尺寸', trigger: 'change' }],
                    containerType: [{ required: true, message: '请选择类型', trigger: 'change' }],
                    // shipAgentName: [{ required: true, message: '请选择船代', trigger: 'change' }],
                    tradeType: [{ required: true, message: '请选择内外贸', trigger: 'change' }],
                    planType: [{ required: true, message: '请选择作业类型', trigger: 'change' }],
                    accountUnit: [{ required: true, message: '请选择结算单位', trigger: 'change' }],
                    finishTime: [{ required: true, message: '请选择施封日期', trigger: 'change' }],
                    imOrEx: [{ required: true, message: '请选择进出口', trigger: 'change' }],
                    tallyClerkId: [{ required: true, message: '请选择理箱人', trigger: 'change' }],
                    tallyTime: [{ required: true, message: '请选择理箱时间', trigger: 'change' }],
                    sealNo: [{ required: true, message: '请输入铅封号', trigger: 'change' }],
                }
            }
        },
        mounted() {
            console.log(this.$route)
            if (!this.isEdit) {
                getWorkUserId().then(res => {
                    if (res.data) {
                        this.form['tallyClerk'] = res.data.personName
                        this.form['tallyClerkId'] = res.data.id
                    }
                })
                let nowDate = new Date().getTime()
                this.form['finishTime'] = getLocalTime(nowDate, 'YYYY-MM-DD hh:mm:ss')
                this.form['tallyTime'] = getLocalTime(nowDate, 'YYYY-MM-DD hh:mm:ss')

            }
        },
        methods: {
            clearForm() {
                return {
                    containerId: "",
                    containerSize: "",
                    containerType: "",
                    tradeType: "",
                    sealNo: "",
                    portCode: "",
                    planType: "",
                    shipAgentName: "",
                    shipAgentId: "",
                    remark: "",
                    accountUnit: "",
                    finishTime: "",
                    tallyClerk: "",
                    imOrEx: "",
                    tallyTime: "",
                    attachments: [],
                }
            },
            handleSubmit() {
                let datas = {
                    search_EQ_portCode: this.form.portCode,
                    search_EQ_type: this.form.planType,
                    search_EQ_containerId: this.form.containerId,
                    search_EQ_sealNo: this.form.sealNo,
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let data = {
                            ...this.form,
                            records: [{
                                tallyClerk: this.form.tallyClerk,
                                tallyClerkId: this.form.tallyClerkId,
                                tallyTime: this.form.tallyTime
                            }]
                        }
                        VerificationHistory(datas).then(res => {
                            if (res.data === true) {
                                this.$message({ message: '该箱号、铅封已存在!', type: 'warning' })
                            } else {
                                this.$confirm('是否需要继续保存?', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning',
                                    center: true
                                }).then(() => {
                                    this.isEdit ? this.handleToEdit(data) : this.handleToAdd(data)
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    });
                                }).catch(() => {
                                    this.$message({
                                        type: 'info',
                                        message: '取消保存'
                                    });
                                });

                            }
                        })

                    } else {
                        this.$message({ message: '请检查表单!', type: 'error' })
                    }
                })


            },
            handleToEdit(data) {
                editPlanList(data.planId, data).then(res => {
                    this.$message({ message: '编辑成功!', type: 'success' })
                    this.dialogForm = false
                })
            },
            handleToAdd(data) {
                addPlanList(data).then(res => {
                    this.$message({ message: '新增成功!', type: 'success' })
                    this.dialogForm = false
                })
            },
            handleSelectName(val) {
                this.form.shipAgentName = val
                if (this.form.accountUnit) {
                    console.log(this.form.accountUnit)
                    this.form.accountUnit = val
                }
            },
            handleSelectId(val) {
                this.form.shipAgentId = val
            },
            selectContainer(item) {
                console.log(item)
                if (item.containerId) {
                    this.form.containerSize = item.containerSize
                    this.form.containerType = item.containerType
                    this.form.shipAgentName = item.shipAgentName
                    this.form.shipAgentId = item.shipAgentId
                    this.form.tradeType = item.tradeType
                }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$emit('load')
                    this.$parent.dialogForm = false
                }
            }
        },
        computed: {},
    }
</script>

<style scoped>

</style>
